<template>
  <div class="detailed">
    <div class="heades">
      <p @click="Goback()">
        <i class="iconfont icon-fanhui"></i>
      </p>
      <p>详情</p>
      <p>
        <span class="iconfont icon-dian"></span>
        <span class="iconfont icon-yuanxinyuan"></span>
      </p>
    </div>
    <div class="detail">

      <div class="border">
        <div class="bor">
          <p>绿地地产</p>
          <p>开发者</p>
          <p>18767568790</p>
          <p>长江路105号东80米</p>
        </div>
        <div class="im">
          <!-- <img src="http://47.111.14.227:7001/public/sdasdasdas.png" alt=""> -->
        </div>
      </div>
      <div class="item">
        <dl v-for="(item,index) in list.slice(1,5)" :key="index">
          <dt>
            <!-- <img :src="'http://47.111.14.227:7001'+item.url" alt=""> -->
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftgi12.jia.com%2F123%2F073%2F23073114.jpg&refer=http%3A%2F%2Ftgi12.jia.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633437847&t=5ba6887bcb7dc7ddc3198fdee27f22d0" alt="">
          </dt>
          <dd>
            <p>{{item.house_title}}</p>
            <p>
              <span>{{item.bedroom_count}}</span>
              <span>{{item.per_price}}</span>
            </p>
            <p>{{item.total_price}}</p>
          </dd>
        </dl>
      </div>
    </div>

    <div class="fot">
      <p></p>
      <p>
        <span @click="Tell()">在线咨询</span>
        <span @click="Jpan()">电话咨询</span>
      </p>
    </div>
  </div>
</template>

<script>
import axios from "../../utils/axios";
export default {
  data() {
    return {
      datas: [],
      list:''
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    Goback() {
      this.$router.push("/top");
    },
    Tell() {
      this.$router.push("/liaotian");
    },
    Jpan() {
      this.$router.push("/jianpan");
    },
    getlist() {
      axios.get("/rankingList").then((res) => {
        this.datas = res.data.list;
        const result = this.datas.find((item) => item.id === this.datas.b_id);
        console.log(result, "123");
      });
      axios.get('/house/all').then((res)=>{
        this.list=res.data.list;
        console.log(res);
      })
    },
  },
};
</script>

<style>
html,body,App{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.detailed {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
.heades {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgb(70, 142, 224);
  color: #fff;
}
.heades p {
  padding: 0 10px;
}
.heades p:nth-child(3) {
  border: 1px solid #fff;
  border-radius: 20px;
  padding: 3px 5px;
  margin-right: 20px;
}
.heades p span {
  margin-left: 10px;
}
.detail{
  width: 100%;
  height: 100%;
  position: relative;
  flex: 1;
  overflow-y: scroll;
}
.border{
  border: 1px solid #ccc;
  width: 80%;
  height: 30%;
  display: flex;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 30px;
  margin-top: 20px;
  padding: 0 10px;
  line-height: 30px;
}

.border p:nth-child(1){
  padding: 10px 0;
}
.border p:nth-child(2){
  font-size: 22px;
}
.border p:nth-child(4){
  color: #888;
}
.item{
  width: 100%;
  height: 100%;
  padding: 20px;
}
.item dl{
  display: flex;
  border-bottom: 1px solid #ccc;
  line-height: 30px;
  margin-top: 20px;
}
.item dt{
  width: 100px;
  height: 100px;
}
.item dt img{
  width: 100%;
  height: 100%;
}
.item dd{
  margin-left: 20px;
}
.item dd p:nth-child(1){
  font-weight: bold;
  font-size: 18px;
}
.item dd p:nth-child(2){
  font-size: 12px;
}
.item dd p:nth-child(3){
  color: tomato;
}
.fot{
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  border-top: 1px solid #ccc;
  justify-content: space-between;
  padding: 0 20px;
}
.fot p span:nth-child(1){
  padding: 10px 15px;
  border-radius: 50px 0 0 50px;
  background-color: orange;
  color: #fff;
}
.fot p span:nth-child(2){
  border-radius: 0 50px 50px 0 ;
  background-color: tomato;
  padding: 10px 15px;
  color: #fff;
}

</style>